<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WEB前端与Android-IOS 通信协议</title>



</head>

<body>

<h1 id="toc_0">WEB前端与Android/IOS 通信协议</h1>

<h2 id="toc_1">概述</h2>

<p>Hybrid app技术中， <strong>JSBridge</strong> 作为JS和Native之前的桥梁，是JS和Native之前的一种通信方式。
JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只通过固定的桥对象调用Native。</p>

<h2 id="toc_2">流程</h2>

<p>流程：H5-&gt;通过协议触发一个命令-&gt;Native捕获到该命令,进行分析-&gt;原生做处理-&gt;Native调用H5的方法传递回调。</p>

<h2 id="toc_3">初始参数传递</h2>

<p>方向：Native -&gt; H5</p>

<p>通过地址栏拼接参数方式传递初始参数，H5通过 window.location.href 获取地址栏参数</p>

<p>示例：Native向H5 传递 token，account信息</p>

<p>http://www.blocksteam.com/mblocksteam/bsApp/index.html#/user/wallet/receivables?token=MTUzODYzNDU0OZndsKGQZYfYlY1mknnOn52OoNzdf7mwZIe2q2WFrLdhgri_bYScgtV6o53ciJeGnoCf1NyXtqBv&amp;account=ZL15369153545682</p>

<p>注1： Native将默认传递token和account两个平台业务相关参数</p>

<h2 id="toc_4">命令传递</h2>

<p>方向：H5 -&gt; Native -&gt; H5(回调)</p>

<p>H5通过命令 + 参数形式传递给，Native根据命令码解析作出相应响应动作。</p>

<p>示例: H5 调用 Native 二维码扫码功能</p>

<p>var c = &#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Scan&quot;}}&#39;;
window.android.callNative(c);(安卓)
window.webkit.messageHandlers.ios.postMessage(c);(苹果)</p>

<h2 id="toc_5">扩展参数ext</h2>

<p>方向: H5-&gt;Native</p>

<p>命令传递参数不能满足业务要求时，允许WEB端自定义传递参数
Native将在开启下一个窗口时将扩展参数拼接入地址栏</p>

<p>示例: H5 调用 Native 打开新窗口,并传入初始化参数</p>

<p>var c = &#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Window&quot;,&quot;param&quot;:&quot;open&quot;,&quot;url&quot;:&quot;http://www.blocksteam.com/mblocksteam/bsApp/index.html#/invit&quot;,&quot;title&quot;:&quot;我的邀请&quot;,&quot;ext&quot;:{&quot;id&quot;:&quot;101&quot;,&quot;name&quot;:&quot;hello&quot;}}}&#39;}&#39;;
window.android.callNative(c);(安卓)
window.webkit.messageHandlers.ios.postMessage(c);(苹果)</p>

<p>新窗口地址栏URL：
http://www.blocksteam.com/mblocksteam/bsApp/index.html#/invit?token=MTUzODYzNDU0OZndsKGQZYfYlY1mknnOn52OoNzdf7mwZIe2q2WFrLdhgri_bYScgtV6o53ciJeGnoCf1NyXtqBv&amp;account=ZL15369153545682&amp;id=101&amp;name=hello</p>

<h2 id="toc_6">协议参数定义</h2>

<p>data                最外层包裹标识</p>

<p>cmd             命令码</p>

<p>param           操作参数</p>

<p>url                 新页面地址，分享页地址</p>

<p>title               导航栏标题，分享页标题</p>

<p>ext                 扩展参数</p>

<p>text                分享页正文</p>

<p>logo                分享页图标</p>

<p>right               导航栏右侧功能项,内含title，url为点击右侧按钮后进入新页面的导航栏标题与新页面地址</p>

<h2 id="toc_7">1.窗口操作  Window</h2>

<h3 id="toc_8">1.1 打开窗口</h3>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Window&quot;,&quot;param&quot;:&quot;open&quot;,&quot;url&quot;:&quot;http://www.blocksteam.com/mblocksteam/bsApp/index.html#/invit&quot;,&quot;title&quot;:&quot;我的邀请&quot;}}&#39;</p>

<p>param 打开窗口</p>

<p>url  新页面地址</p>

<p>title 导航栏标题</p>

<h3 id="toc_9">1.2 打开带右侧按钮的窗口</h3>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Window&quot;,&quot;param&quot;:&quot;open&quot;,&quot;url&quot;:&quot; http://www.blocksteam.com/mblocksteam/bsApp/index.html#/mall&quot;,&quot;title&quot;:&quot;积分商城&quot;,&quot;right&quot;:{&quot;title&quot;:&quot;记录&quot;,&quot;url&quot;:&quot;http://www.blocksteam.com/mblocksteam/bsApp/index.html#/record&quot;}}}&#39;</p>

<p>param 打开窗口</p>

<p>url  新页面地址</p>

<p>title 导航栏标题</p>

<p>right 导航栏右侧功能项</p>

<p>right内title 右侧新页面的导航栏标题</p>

<p>right内url  右侧新页面地址</p>

<h3 id="toc_10">1.3 关闭窗口</h3>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Window&quot;,&quot;param&quot;:&quot;close&quot;}}&#39;</p>

<p>param 关闭窗口</p>

<h2 id="toc_11">2.二维码扫码/识别。Scan</h2>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Scan&quot;}}&#39;</p>

<p>回调函数:</p>

<p>function onScan(status,msg,qrcode)</p>

<p>status 状态码</p>

<p>msg    成功/失败说明</p>

<p>qrcode 二维码扫码结果</p>

<h2 id="toc_12">3.分享微信/朋友圈 Share</h2>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Share&quot;,&quot;title&quot;:&quot;BlockSteam-做最好的区块链游戏平台&quot;,&quot;text&quot;:&quot;一个基于区块链的游戏平台，致力于构建更快、更可靠和更具可扩展性的区块链，以满足游戏行业的需求。该平台的服务主要针对游戏领域，并集游戏分发中心，游戏资产交易中心，开发者平台，分布式通信及存储云平台，广告中心为一体&quot;,&quot;url&quot;:&quot;http://www.blocksteam.com&quot;,&quot;logo&quot;:&quot;http://img.myfish.io/commonfish/5.png&quot;}}&#39;;</p>

<p>title    分享页标题</p>

<p>text    分享页正文</p>

<p>logo   分享页图标地址</p>

<p>url     分享到微信后点击跳转网页地址</p>

<h2 id="toc_13">4.Token过期 Token</h2>

<p>调用方式:</p>

<p>&#39;{&quot;data&quot;:{&quot;cmd&quot;:&quot;Token&quot;}}&#39;</p>




</body>

</html>
